import React, { useState } from "react";
import style from "./me.module.css";
import { useSelector } from "react-redux";
import { Button, Modal, Space, Toast, Divider, Input } from "antd-mobile";
// import { DemoBlock, DemoDescription, sleep } from 'demos'
import {
  UserOutline,
  FileOutline,
  HistogramOutline,
  CalendarOutline,
  MessageOutline,
} from "antd-mobile-icons";
import { NavLink, useNavigate } from "react-router-dom";
import Menu from "../../hoc/menu";

import axios from "axios";
const { top, icon, content, IImg, Tui, bian, yong } = style;

function Me(menu: any) {
  const { id, avatar_url, username } = useSelector(
    (state) => (state as any).user
  );
  console.log(username, "12");

  const [value, setvalue] = useState<any>(username);
  // console.log(val);

  const navigate = useNavigate();
  const exit = () => {
    localStorage.clear();
    setTimeout(() => navigate("/login"), 1000);
  };
  const bianji = async () => {
    console.log(1111);
    // window.prompt("")

    // let res = await axios.patch("http://127.0.0.1:8090/user", {
    //   // console.log(res);
    //   name: username
    // })
    // console.log(res, "123");
  };
  console.log(id, "id");
  return (
    <div style={{ fontSize: 18 }}>
      <ul className={top}>
        {id ? (
          <div>
            <div className={Tui}>
              <h5 onClick={exit} style={{ color: "#fff" }}>
                退出
              </h5>
            </div>
            <NavLink to={"/bianji"}>
              <div className={bian}>
                <h5>编辑</h5>
              </div>
            </NavLink>
            <div className={IImg}>
              <img src={avatar_url} />
            </div>
            <div>{username}</div>
          </div>
        ) : (
          <li>
            <NavLink to={{ pathname: "/login" }}>
              <div>
                <UserOutline />
              </div>
              点击登录
            </NavLink>
          </li>
        )}
      </ul>

      <ul className={icon}>
        <NavLink to={{ pathname: "/record" }}>
          <li>
            <div>
              <FileOutline />
            </div>
            阅读记录
          </li>
        </NavLink>
        <NavLink to={{ pathname: "/shelf" }}>
          <li>
            <div>
              <HistogramOutline />
            </div>
            我的书架
          </li>
        </NavLink>
        <NavLink to={{ pathname: "/order" }}>
          <li>
            <div>
              <CalendarOutline />
            </div>
            我的订单
          </li>
        </NavLink>
        <NavLink to={{ pathname: "/comment" }}>
          <li>
            <div>
              <MessageOutline />
            </div>
            我的评论
          </li>
        </NavLink>
      </ul>
      <ul className={content}>
        <NavLink to={{ pathname: "/tuisong" }}>
          <li>
            <span>推送消息</span>
            &gt;
          </li>
        </NavLink>
        <NavLink to={{ pathname: "/xitong" }}>
          <li>
            <span>系统通知</span>
            &gt;
          </li>
        </NavLink>
        <NavLink to={{ pathname: "/help" }}>
          <li>
            <span>帮助反馈</span>
            &gt;
          </li>
        </NavLink>
      </ul>
    </div>
  );
}
export default Menu(Me);
